制作網站需要了解的HTML和CSS基礎知識
時間 :
2025-03-13,10:37:01
編輯 ::超級管理員
制作網站需要掌握 HTML（超文本標記語言） 和 CSS（層疊樣式表） 的基礎知識，它們是構建網頁的核心技術。以下是你需要了解的關鍵內容：
一、HTML 基礎
HTML 主要用于定義網頁的結構，如文本、圖片、按鈕、表單等。
1. HTML 結構
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>我的第一個網頁</title>
</head>
<body>
<h1>歡迎來到我的網站</h1>
<p>這是我的第一個網頁，我正在學習 HTML 和 CSS。</p>
</body>
</html>
?? 核心標簽解析：
<!DOCTYPE html>：聲明 HTML5 文檔類型<html>：HTML 頁面根元素<head>：頭部信息，包含meta信息和網頁標題<body>：網頁的主要內容
2. 常見 HTML 標簽
| 標簽 | 作用 |
|---|---|
<h1> - <h6> | 標題標簽（h1 最大，h6 最小） |
<p> | 段落 |
<a href="URL"> | 超鏈接 |
<img src="圖片地址"> | 圖片 |
<ul> <li> | 無序列表 |
<ol> <li> | 有序列表 |
<table> | 表格 |
<form> | 表單 |
<input> | 輸入框 |
<button> | 按鈕 |
<div> | 容器，常用于布局 |
<span> | 行內元素，適用于小范圍文本樣式 |
3. 超鏈接（<a>）
<a href="https://example.com" target="_blank">訪問示例網站</a>
?? target="_blank" 表示在新窗口打開鏈接。
4. 圖片（<img>）
<img src="image.jpg" alt="示例圖片" width="300">
?? alt 文字是圖片的替代文本，SEO 友好。
5. 表單（<form>）
<form action="submit.php" method="POST">
<label for="name">姓名：</label>
<input type="text" id="name" name="name">
<button type="submit">提交</button>
</form>
?? method="POST" 適用于提交數據到服務器。
二、CSS 基礎
CSS 用于美化 HTML 頁面，控制布局、顏色、字體等。
1. CSS 語法
選擇器 {
屬性: 值;
}
示例：
p {
color: blue;
font-size: 18px;
}
?? 讓 <p> 段落的文字變成藍色，字體大小 18px。
2. CSS 添加方式
? 方式 1：內聯 CSS
<p style="color:red;">這是一段紅色文本</p>
? 方式 2：內部 CSS
<style>
h1 { color: green; }
</style>
? 方式 3：外部 CSS（推薦）
<link rel="stylesheet" href="style.css">
在 style.css 文件：
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
3. 選擇器
（1）元素選擇器
h1 { color: red; }
? 選擇所有 <h1> 標簽，并使其變紅。
（2）類選擇器
.important {
font-weight: bold;
color: blue;
}
<p class="important">這是一個重要的段落。</p>
? 多個元素可使用相同的類。
（3）ID 選擇器
#header {
background-color: black;
color: white;
}
<div id="header">這是頭部</div>
? 一個 ID 只能用于一個元素。
4. 盒模型（Box Model）
所有 HTML 元素都可以看作是一個盒子，包含：
內容（Content）
內邊距（Padding）
邊框（Border）
外邊距（Margin）
示例：
css復制編輯.box { width: 300px; padding: 20px; border: 2px solid black; margin: 10px;
}
?? 寬度 = 內容 + 內邊距 + 邊框 + 外邊距
5. 布局方式
（1）Flexbox（彈性布局）
.box {
width: 300px;
padding: 20px;
border: 2px solid black;
margin: 10px;
}
?? justify-content: space-between; 讓元素 平均分布。
（2）Grid（網格布局）
.container {
display: grid;
grid-template-columns: 1fr 2fr;
}
?? 讓 第一列占 1 份，第二列占 2 份。
6. 響應式設計
? 使用 @media 讓網頁適配不同設備
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
?? 當屏幕寬度小于 600px 時，背景變成淺藍色。
三、HTML + CSS 代碼示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>我的網站</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>歡迎來到我的網站</h1>
</header>
<section>
<p>這是一個示例頁面。</p>
<a href="https://example.com" target="_blank">訪問更多內容</a>
</section>
</body>
</html>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
h1 {
color: darkblue;
}
.important {
font-weight: bold;
color: red;
}
總結
| 重點 | HTML | CSS |
|---|---|---|
| 結構 | <h1>, <p>, <a> 等 | 選擇器 h1, .class, #id |
| 布局 | <div>, <span> | display: flex; grid |
| 樣式 | style="" | color, font-size, padding |
| 響應式 | <meta name="viewport"> | @media (max-width: 600px) |
學習 HTML 和 CSS 后，你可以進一步學習：
JavaScript（交互）
Bootstrap / Tailwind CSS（框架）
Web 響應式設計
熱門新聞